<template>
	<view @touchmove.stop.prevent>
		<!-- //搜索框 -->
		<view class="search"><u-search placeholder="关键词/美发师/美容师/美妆师/美甲师" v-model="keyword" shape="square" @custom="searchRes"></u-search></view>
		<!-- 筛选部分 -->

		<view class="shaixuan">
			<view class="select_top">
				<view :class="{ publ: true, con: index == 0 }" @click="meifa()">
					美发
					<view class="ico_text"><text :class="{ icon: true, iconfont: true, con: index == 0 }">&#xe600;</text></view>
				</view>
				<view :class="{ publ: true, con: index == 1 }" @click="tuijian()">
					推荐排序
					<view class="ico_text"><text :class="{ icon: true, iconfont: true, con: index == 1 }">&#xe600;</text></view>
				</view>
				<view :class="{ publ: true, con: index == 2 }" @click="address">
					位置区域
					<view class="ico_text"><text :class="{ icon: true, iconfont: true, con: index == 2 }">&#xe600;</text></view>
				</view>
				<view :class="{ publ: true, con: index == 3 }" @click="filt()">
					筛选
					<view class="ico_text"><text :class="{ icon: true, iconfont: true, con: index == 3 }">&#xe600;</text></view>
				</view>
			</view>

			<view class="select_content">
				<scroll-view scroll-x="true" class="scroll">
					<view class="select_lists" v-for="(item, index) in slist" :key="index" @click="sendParent(item,index);clearss()" >{{ item }}</view>
				</scroll-view>
			</view>
		</view>

		<!-- 遮罩层 -->
		<view class="mode" @click="model_active()" v-if="moldel_status" @touchmove.stop.prevent>
			<!-- 点击美发的内容 -->
			<view class="meifa_cont" v-if="meifa_status" @click.stop="">
				<view class="meifa_left">
					<view v-for="(item, index) in filter" :key="index" :class="{ name: true, name_active: meifa_index == index }" @click.stop="cont_filter(index)">
						{{ item.serviceCategory }}
						<text class="icon iconfont" v-if="meifa_index == index">&#xe6f2;</text>
					</view>
				</view>
				<view class="meifa_right">
					<view
						v-for="(item1, index1) in filter[meifa_index].serviceSubdivide"
						:key="index1"
						:class="{ name: true, name_active: meifa_right == index1 }"
						@click.stop="meifa_rigthAct(index1)"
					>
						<view>{{ index1 }} ({{ item1 }})</view>
					</view>
				</view>
			</view>
			<!-- 推荐排序的内容 -->
			<view class="recommend_cont" v-if="recommend_status" @click.stop="">
				<view v-for="(item, index) in recommend" :key="index" :class="{ name: true, name_active: recommend_index == index }" @click.stop="reco(index,item)">{{ item }}</view>
			</view>
			<!-- 位置区域 -->
			<view class="address" v-if="address_status" @click.stop="">
				<view class="address_left">
					<scroll-view scroll-y="true" style="height: 500rpx;">
						<view v-for="(item, index) in addressList"	:key="index":class="{ address_default: true, address_active: address_index == index }"	@click.stop="selected_add(index, item)">
							{{ item }}
							<text class="icon iconfont" v-if="address_index == index">&#xe6f2;</text>
						</view>
					</scroll-view>
				</view>
				<view class="address_right">
					<scroll-view scroll-y="true" style="height: 500rpx;">
						<view v-for="(item, index) in addressList2"	:key="index" @click="add_right(index, item)" :class="{ address_default: true, address_active: address_index2 == index }">
							{{ item }}
						</view>
					</scroll-view>
				</view>
			
			</view>
			<!-- 筛选 -->
			<view class="filt" v-if="filt_status" @click.stop="">
				<view class="price_choose">价格选择</view>
				<view class="price_number">
					<view class="text">￥0</view>
					<view class="text1">￥{{ rangeValues[0] }}</view>
					<view class="text1">￥{{ rangeValues[1] }}</view>
					<view class="text">￥1000+</view>
				</view>
				<Reange
					:width="slideWidth"
					:height="slideHeight"
					:blockSize="slideBlockSize"
					:min="slideMin"
					:max="slideMax"
					:values="rangeValues"
					:step="step"
					:liveMode="isLiveMode"
					:background-color="bg"
					:active-color="acbg"
					bar-height="15"
					@rangechange="onRangeChange"
				></Reange>
				<!-- 设计师星级 -->
				<view class="design" v-if="flg1">
					<view class="name">设计师(星级)</view>
					<view class="xinji">
						<view v-for="(item, index) in designList" :key="index" :class="{ xinji_text: true, xinji_active: xinji_index == index }" @click.stop="xinji(index, item)">
							<text :class="{ xi: true, text_active: xinji_index == index }">{{ item }}</text>
						</view>
					</view>
				</view>
				<!-- 商家 -->
				<view class="design" v-if="flg2">
					<view class="name">商家(钻级)</view>
					<view class="xinji">
						<view
							v-for="(item, index) in diamondList"
							:key="index"
							:class="{ xinji_text: true, xinji_active: diamond_index == index }"
							@click.stop="diamond(index, item)"
						>
							<text :class="{ xi: true, text_active: diamond_index == index }">{{ item }}</text>
						</view>
					</view>
				</view>
				<!-- 门店类型 -->
				<view class="design" v-if="flg3">
					<view class="xinji">
						<view v-for="(item, index) in storeList" :key="index" :class="{ xinji_text: true, xinji_active: store_index == index }" @click.stop="store(index, item)">
							<text :class="{ xi: true, text_active: store_index == index }">{{ item }}</text>
						</view>
					</view>
				</view>
				<!-- 重置，完成 -->
				<view class="reset">
					<view class="reset_ok" @click.stop="rect()"><text>重置</text></view>
					<view class="com_ok" @click.stop="getForm()"><text>完成</text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getCity, getci, getAll } from '@/utils/address.js';
import Reange from '@/components/search_huakuai/range-slider';
// import { ads } from '@/static/addrss.js';
import { getDistrict, getLocationName, getCategory } from '@/api/index.js';
export default {
	data() {
		return {
			keyword: '',
			select_lists: ['洗发', '剪发', '烫发', '染发', '护发', '头皮', '接发'],
			index: 0, //名字选择下标
			meifa_index: 0, //美发内容选择
			meifa_right: 0, //美发内容右边选择状态
			moldel_status: false, //遮罩层是否出现
			meifa_status: false, //控制美发框的内容是否出现
			recommend_index: 0, //控制推荐内容里面的选中状态
			recommend_status: false, //控制推荐排序是否显示
			address_status: false, //控制地址是否显示
			address_index: false, //地址名的选择状态
			address_index2: 0,
			filt_status: false, //筛选是否显示
			filter: [
				{
					name: '附近',
					content: [
						{
							name: '全部',
							number: 2365
						},
						{
							name: '洗护',
							number: 523
						},
						{
							name: '造型',
							number: 2365
						},
						{
							name: '剪发',
							number: 2365
						},
						{
							name: '洗剪吹',
							number: 2365
						},
						{
							name: '染发',
							number: 2365
						},
						{
							name: '烫发',
							number: 2365
						},
						{
							name: '接发',
							number: 2365
						},
						{
							name: '头发护理',
							number: 2365
						},
						{
							name: '头皮护理',
							number: 2365
						},
						{
							name: '其他',
							number: 2365
						}
					]
				},
				{
					name: '美发',
					content: [
						{
							name: '全部',
							number: 2365
						},
						{
							name: '洗护',
							number: 523
						},
						{
							name: '造型',
							number: 2365
						},
						{
							name: '剪发',
							number: 2365
						}
					]
				},
				{
					name: '美容',
					content: [
						{
							name: 'xx',
							number: 2365
						},
						{
							name: 'xxx',
							number: 523
						},
						{
							name: 'xx',
							number: 2365
						},
						{
							name: 'xxx',
							number: 2365
						}
					]
				},
				{
					name: '美妆',
					content: []
				},
				{
					name: '美体',
					content: []
				},
				{
					name: '美甲',
					content: []
				},
				{
					name: '美睫',
					content: []
				}
			],
			recommend: ['智能排序', '离我最近', '好评优先', '销量最多', '最新上架', '价格最低', '价格最高'],
			rangeValues: [0, 5.2],
			slideWidth: 700,
			slideHeight: 30,
			slideBlockSize: 30,
			slideMin: 0,
			slideMax: 1000,
			isLiveMode: true,
			step: 0.1,
			bg: '#C3C3C3',
			acbg: '#00C6C2',
			designList: ['二星/中级', '三星/高级', '四星/导师', '五星/名师', '不限'],
			xinji_index: null, //星级默认不选择
			diamondList: ['二钻/经济', '三钻/品质', '四钻/高档', '五钻/精品', '不限'], //商家钻石列表
			diamond_index: null, //商家钻石默认不选中
			store_index: null, //门店类型默认不选择中
			storeList: ['独立设计师', '工作室', '专业店', '综合店', '连锁店', '品牌店'],
			filtData: {
				rangeValues: [0, 0],
				designCont: '',
				diamondCont: '',
				storeCont: ''
			},
			addressList: null,
			addressList2: null,
			address_rigText:'',//点击获取得到当前的区域
			conts:'',
			major:'',
			ind:'',
			page:''
		};
	},
	components: {
		Reange
	},
	props: ['slist', 'addr','flg','flg1','flg2','flg3'],
	methods: {
		//点击美发
		meifa() {
			this.index = 0;
			this.meifa_status = true;
			this.moldel_status = true;
			this.recommend_status = false;
			this.address_status = false;
			this.filt_status = false;
			uni.$emit('page',{page:1})
		},
		//点击推荐排序
		tuijian() {
			this.index = 1;
			this.meifa_status = false;
			this.moldel_status = true;
			this.recommend_status = true;
			this.address_status = false;
			this.filt_status = false;
			uni.$emit('page',{page:1})
		},
		//点击位置区域
		address() {
			this.index = 2;
			this.meifa_status = false;
			this.moldel_status = true;
			this.recommend_status = false;
			this.address_status = true;
			this.filt_status = false;
			uni.$emit('page',{page:1})
		},
		//点击筛选
		filt() {
			this.index = 3;
			this.meifa_status = false;
			this.address_status = false;
			this.recommend_status = false;
			this.moldel_status = true;
			this.filt_status = true;
			uni.$emit('page',{page:1})
		},
		//美发内容选择
		cont_filter(index) {
			this.meifa_index = index;
		},
		//美发内容右边选择
		meifa_rigthAct(index1) {
			this.meifa_right = index1;
			console.log(index1)
			let data = {
				serviceSubdivide:index1
			}
			//发给设计师
			uni.$emit('mflist',data)
			//发给品牌馆
			let data1 = {
				subdivide:index1
			}
			uni.$emit('mflist1',data1)
			this.moldel_status = false;
			this.meifa_status = false;
			this.recommend_status = false;
			this.address_status = false;
			this.filt_status = false;
		},
		//遮罩层
		model_active() {
			this.moldel_status = false;
			this.meifa_status = false;
			this.recommend_status = false;
			this.address_status = false;
			this.filt_status = false;
		},
		//推荐排序
		reco(index,item) {
			let that =this
			console.log('reeo',item)
			this.conts = item
			that.recommend_index = index;
			if(item=='销量最多'){
				
				uni.$emit('xlzg',{
					seaech_key:that.keyword
				})
				//发给品牌馆
				uni.$emit('xlzd1',{
					storeFunction:that.keyword
				})
				
			}
			if(item=='离我最近'){
				console.log('biubiubu')
			}
			if(item=='价格最低'){
				uni.$emit('jgzd',{
					seaech_key:that.keyword
				})
				//发给品牌馆
				uni.$emit('jgzd1',{
					storeFunction:that.keyword
				})
			}
			if(item == '价格最高'){
				uni.$emit('jgzg',{
					seaech_key:that.keyword
				})
				//发给品牌馆
				uni.$emit('jgzg1',{
					storeFunction:that.keyword
				})
			}
			if(item=='最新上架'){
				uni.$emit('zxsj',{
					seaech_key:that.keyword
				})
				//发给品牌馆
				uni.$emit('zxsj1',{
					storeFunction:that.keyword
				})
			}
			if(item=='好评优先'){
				uni.$emit('hpyx',{
					seaech_key:that.keyword
				})
				//发给品牌馆
				uni.$emit('hpyx1',{
					storeFunction:that.keyword
				})
			}
			if(item=='智能排序'){
				uni.$emit('znpx',{
					seaech_key:that.keyword
				})
				//发给品牌馆
				uni.$emit('znpx1',{
					storeFunction:that.keyword
				})
			}
			this.moldel_status = false;
			this.meifa_status = false;
			this.recommend_status = false;
			this.address_status = false;
			this.filt_status = false;
		},
		onRangeChange(e) {
			console.log(e);
			this.rangeValues = [e.minValue, e.maxValue];

			console.log(this.rangeValues);
			// console.log(JSON.stringify(e));
		},
		// 星级选择
		xinji(index, item) {
			this.xinji_index = index;
			this.filtData.designCont = index+2;
		},
		// 钻石星级选择
		diamond(index, item) {
			this.diamond_index = index;
			this.filtData.diamondCont = item;
		},
		//门店类型
		store(index, item) {
			this.store_index = index;
			this.filtData.storeCont = item;
		},
		//点击重置
		rect() {
			this.filtData.designCont = '';
			this.filtData.diamondCont = '';
			this.filtData.storeCont = '';
			this.filtData.rangeValues = [0, 0];
			this.xinji_index = null;
			this.diamond_index = null;
			this.store_index = null;
			console.log(this.filtData);
		},
		//点击完成
		getForm() {
			this.filtData.rangeValues = this.rangeValues;
			// console.log(this.filtData);
			let data = {
				occupationName:this.keyword,
				starRating:this.filtData.designCont==6?'':this.filtData.designCont,
				price1:this.filtData.rangeValues[0],
				price2:this.filtData.rangeValues[1]
			}
			
			console.log(this.filtData)
			uni.$emit('wan',data)
			//发给品牌馆
			let data1 = {
				price1:this.filtData.rangeValues[0],
				price2:this.filtData.rangeValues[1],
				storeFunction:this.keyword,
				major:this.filtData.storeCont,
				drillGrade:this.filtData.diamondCont=='二钻/经济'?2:(this.filtData.diamondCont=='三钻/品质'?3:(this.filtData.diamondCont=='四钻/高档'?4:(this.filtData.diamondCont=='五钻/精品'?5:'')))
			}
			// console.log(data1)
			uni.$emit('wan1',data1)
			this.moldel_status = false;
			this.meifa_status = false;
			this.recommend_status = false;
			this.address_status = false;
			this.filt_status = false;
			// let obk = {
			// 	name: 'er'
			// };
			
		},
		//点击位置的左边名称
		selected_add(index, item) {
			let data = {
				city: this.$props.addr,
				district: item
			};
			this.address_rigText = item
			this.address_index = index;
			getLocationName(data).then(res => {
				this.addressList2 = res[1].data.data;
			});
			console.log(data);
		},
		//点击位置右边
		add_right(index, item) {
			this.address_index2 = index;
			let data = {
				district:this.address_rigText,
				locationName:item,
				occupationName:this.keyword,
				
			}
			this.moldel_status = false;
			this.meifa_status = false;
			this.recommend_status = false;
			this.address_status = false;
			this.filt_status = false;
			uni.$emit('wzyb',data)
			let data1 = {
				// district:this.address_rigText,
				locationName:item,
				storeFunction:this.keyword,
				
			}
			//发送给品牌馆
				uni.$emit('wzyb1',data1)
		},
		//获取地址列表
		getaddressList() {
			let that = this;
			console.log(this.$props, 'xxxxx');
			let params = {
				city: this.$props.addr
			};

			console.log(this.$props.addr);
			// return
			getDistrict(params).then(res => {
				console.log(res);
				that.addressList = res[1].data.data;
			});
		},
		//点击给父亲发送参数
		async sendParent(item,index) {
			let that = this;
			that.major = item
			that.ind = index
			// console.log(item);
			uni.$emit('cont', {
				occupationName: that.keyword,
				level: item,
				starRating:index+2
			});
			//这里发给品牌馆
		
				
			
			
			uni.$emit('item',{
				major:item,
				storeFunction:that.keyword
			})
			
			// this.$parent.getCont()
		},
		//获取美发筛选的内容
		getMei() {
			let that = this;
			getCategory().then(res => {
				console.log(res, '筛选');
				that.filter = res[1].data.data;
				console.log(that.filter);
			});
		},
		// 搜索按钮
		searchRes(){
			console.log(this.keyword)
			let data ={
				occupationName:this.keyword,
				starRating:''
			}
			uni.$emit('search',data)
			//发给品牌馆
			let data1 ={
				storeFunction:this.keyword,
				
			}
			uni.$emit('search1',data1)
			this.moldel_status = false;
			this.meifa_status = false;
			this.recommend_status = false;
			this.address_status = false;
			this.filt_status = false;
		},
		clearss(){
			uni.$emit('clears')
		}
	},
	onShow() {
		// getci()
		// getAll()
	},
	created() {
		let that = this;
		console.log(this.$props);
		
		//监听筛选下拉请求
		uni.$on('send_filters',res=>{
			console.log(res.msg)
			that.getForm()
		})
		//监听地址下拉请求
		uni.$on('send_address',res=>{
			that.add_right()
		})
		//	//加载门店类型的跟多
		uni.$on('send_type',res=>{
			that.page++
			that.sendParent(that.major,that.ind)
		})
		//加载更多智能排序
		uni.$on('send_zn',res=>{
			// console.log('xxxppppppppppppppp')
			// console.log('bbbbbbbbb',that.conts)
			that.reco(that.recommend_index ,that.conts)
		})
		//服务细分加载更多
		uni.$on('send_serve',res=>{
			that.meifa_rigthAct(that.meifa_right)
		})
		console.log('77777777777')
		this.$nextTick(function() {
			setTimeout(function() {
				that.getaddressList();
				that.getMei();
			}, 100);
		});
	},
	destroyed() {
		uni.$off('send_filters')
		uni.$off('send_address')
		uni.$off('send_type')
		uni.$off('send_zn')
		uni.$off('send_serve')
	}
};
</script>

<style scoped lang="less">
//遮罩层
.mode {
	position: fixed;
	top: 150rpx;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100vh;
	background: rgba(0, 0, 0, 0.4);
}
//顶部搜索
.search {
	background: white;
	padding: 22rpx 24rpx;
	z-index: 100;
}
//筛选
.shaixuan {
	// margin-top: 10rpx;
	width: 100%;
	z-index: 999;
	background: white;
	.select_top {
		display: flex;
		justify-content: space-around;
		// align-items: center;
		font-size: 30rpx;
		font-family: PingFang;
		font-weight: 500;
		color: #2d2d2d;
		.con {
			color: #00c6c2 !important;
		}
		.publ {
			display: flex;

			.ico_text {
				margin-top: -8rpx;

				.iconfont {
					width: 5rpx;
					text-align: center;
					color: black;
					font-size: 12rpx;
					margin-left: 11rpx;
				}
			}
		}
	}

	.select_content {
		width: 100%;
		height: 85rpx;
		background: #eeeeee;
		margin-top: 11rpx;
		.scroll {
			width: 100%;
			height: 100%;
			white-space: nowrap;
			overflow: hidden;
			padding-top: 12rpx;
			.select_lists {
				display: inline-block;
				// margin: 12rpx auto;

				width: 100rpx;
				height: 60rpx;
				text-align: center;
				background: #ffffff;
				border-radius: 6rpx;
				margin-left: 26rpx;
				line-height: 60rpx;
				font-size: 24rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #2f2f2f;
			}
		}
	}
}

//点击美发的内容
.meifa_cont {
	z-index: 999;
	background-color: white;
	height: 800rpx;
	// border: 1px solid red;
	display: flex;
	padding-left: 49rpx;
	padding-top: 28rpx;
	.meifa_left {
		flex: 1;
	}
	.meifa_right {
		flex: 3;
	}
	.name {
		font-size: 24rpx;
		font-family: PingFang;
		font-weight: 500;
		color: #666666;
		margin-bottom: 45rpx;
	}
	.name_active {
		color: #00c6c2;
	}
}

//推荐排序的样式
.recommend_cont {
	z-index: 999;
	padding: 25rpx 25rpx;
	background-color: white;
	// border: 1rpx solid red;
	.name {
		font-size: 24rpx;
		font-family: PingFang;
		font-weight: 500;
		color: #666666;
		margin-bottom: 45rpx;
	}
	.name_active {
		color: #00c6c2;
	}
}
//位置区域
.address {
	padding-left: 30rpx;
	height: 500rpx;
	background: white;
	// border: 1rpx solid red;
	display: flex;
	z-index: 999;
	.address_left {
		width: 130rpx;
		overflow: hidden;
		.name {
			font-size: 24rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #666666;
			margin-bottom: 45rpx;
		}
		.name_active {
			color: #00c6c2;
		}
	}
	.address_default {
		height: 40rpx;
		margin-top: 15rpx;
		font-size: 24rpx;
		font-family: PingFang;
		font-weight: 500;
		color: #666666;
		line-height: 30rpx;
	}
	.address_active {
		font-size: 24rpx;
		font-family: PingFang;
		font-weight: 500;
		color: #00c6c2;
	}
}
//筛选的内容
.filt {
	z-index: 999;
	padding: 42rpx 26rpx;
	background: white;
	// border: 1px solid red;
	// height: 500rpx;
	.price_choose {
		font-size: 28rpx;
		font-family: PingFang;
		font-weight: 500;
		color: #333333;
		margin-bottom: 50rpx;
	}
	.price_number {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-bottom: 5rpx;
		.text {
			font-size: 26rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #707070;
		}
		.text1 {
			font-size: 30rpx;
			font-family: PingFang;
			font-weight: bold;
			color: #282828;
		}
	}
	//设计师星级
	.design {
		margin-top: 15rpx;
		.name {
			font-size: 28rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #333333;
			margin-bottom: 50rpx;
		}
		.xinji {
			display: flex;
			flex-wrap: wrap;

			.xinji_text {
				margin-right: 8rpx;
				margin-bottom: 22rpx;
				// display: inline-block;
				width: 220rpx;
				height: 58rpx;
				background: #f4f4f4;
				border-radius: 4rpx;
				text-align: center;
				line-height: 50rpx;
			}
			.xi {
				font-size: 22rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #282828;
			}
			.text_active {
				color: white;
				opacity: 0.8;
			}
			.xinji_active {
				background: #00c6c2;
			}
		}
	}
	//重置，完成
	.reset {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
		.reset_ok {
			width: 334rpx;
			height: 70rpx;
			background: #eeeeee;
			border-radius: 4rpx;
			text-align: center;
			line-height: 70rpx;
			font-size: 30rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #646464;
		}
		.com_ok {
			width: 334rpx;
			height: 70rpx;
			background: #00c6c2;
			border-radius: 4rpx;
			text-align: center;
			line-height: 70rpx;
			font-size: 30rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #646464;
			text {
				color: white;
				opacity: 0.8;
			}
		}
	}
}
</style>
